<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/t/hplus/include/taglib.jsp"%>

<!DOCTYPE html>
<html>

<head>
    <title>商户字典管理</title>
	<%@ include file="/WEB-INF/t/hplus/include/head.jsp"%>
</head>

<body>
    <div class="wrapper wrapper-content animated fadeInRight">
   	   <div class="row"> 
	    <div class="col-sm-12"> 
	     <div class="float-e-margins"> 
	      <div class="no-padding"> 
			<div id="dictToolbar" class="btn-group hidden-xs" role="group"> 
			 <button type="button" class="addDict btn btn-outline btn-default" title="添加字典"> <i class="glyphicon glyphicon-plus" aria-hidden="true"></i> 添加</button> 
			</div>
			<table id="dictList"></table>
	      </div> 
	     </div> 
	    </div> 
	   </div> 
    </div>
    
<div id="dictModal" class="modal fade" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content animated bounceInUp">
	       <form class="form-horizontal" id="dictForm">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title"></h4>
			</div>
			<div class="modal-body">
		        <input type="hidden" id="id" name="id">
		        <div class="form-group"> 
		         <label class="col-sm-3 control-label">字典类型：</label> 
		         <div class="col-sm-8"> 
		          <input id="type" name="type" class="form-control" type="text"> 
		          <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 由字母和下划线组成</span> 
		         </div> 
		        </div> 
		        <div class="form-group"> 
		         <label class="col-sm-3 control-label">字典值：</label> 
		         <div class="col-sm-8"> 
		          <input id="value" name="value" class="form-control" type="text"> 
		          <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 由字母和数字组成</span> 
		         </div> 
		        </div> 
		        <div class="form-group"> 
		         <label class="col-sm-3 control-label">字典显示：</label> 
		         <div class="col-sm-8"> 
		          <input id="label" name="label" class="form-control" type="text"> 
		         </div> 
		        </div> 
		        <div class="form-group"> 
		         <label class="col-sm-3 control-label">上级字典：</label> 
		         <div class="col-sm-8"> 
                      <select id="parentId" name="parentId" class="form-control m-b"></select>
		         </div> 
		        </div> 
		        <div class="form-group"> 
		         <label class="col-sm-3 control-label">排序：</label> 
		         <div class="col-sm-8"> 
		          <input id="sort" name="sort" class="form-control" type="text" value="0"> 
		         </div> 
		        </div> 
		        <div class="form-group"> 
		         <label class="col-sm-3 control-label">描述：</label> 
		         <div class="col-sm-8"> 
		          <input id="description" name="description" class="form-control" type="text">
		         </div> 
		        </div> 
			</div>
			<div class="modal-footer">
		          <button class="btn btn-primary" type="submit">提交</button> 
		          <button class="btn btn-white" type="submit" data-dismiss="modal">关闭</button>
			</div>
			</form> 
		</div>
	</div>
</div>  

<div class="modal fade" id="delModal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInUp">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">删除字典</h4>
            </div>
            <div class="modal-body">
                <p>确定删除该字典吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">放弃</button>
                <button type="button" class="btn btn-primary" id="delOk">确定</button>
            </div>
        </div>
    </div>
</div>
    
<script type="text/javascript">
	var $table = $("#dictList"),
		$delModal = $('#delModal');
	
	$(document).ready(function(){
		$table.bootstrapTable({
			url: "${ctx}/pdict/list", //get请求, 如果cache为false默认会加随机数, 如果列排序sortable=true则还会加sort和order
			cache: false,
			showRefresh: true,
			showToggle: true,
			showColumns: true,
	        toolbar: '#dictToolbar',
	        iconSize : "outline",
	        columns:[{
	        	field:'type',
	        	title:'字典类型',
	        	width: 150,
	        	align:'center'
	        },{
	        	field:'value',
	        	title:'字典值',
	        	align:'center'
	        	//sortable: true,
	        	//sortOrder: "asc"
	        },{
	        	field:'label',
	        	title:'字典显示',
	        	width: 150,
	        	align:'center'
	        	//sortable: true,
	        	//sortOrder: "asc"
	        },{
	        	field:'sort',
	        	title:'排序',
	        	align:'center'
	        },{
	        	field:'createTime',
	        	title:'创建时间',
	        	align:'center'
	        },{
	        	field:'description',
	        	title:'描述',
	        	align:'center'
	        },{
	        	field:'action',
	        	title:'操作',
	        	align:'center',
	        	formatter: function(value, row, index){
					var str = '&nbsp;';
					str += '<a href="javascript:void(0)" onclick="editDict('+ row.id +');" >编辑</a>';
					str += '&nbsp;|&nbsp;';
					str += '<a href="javascript:void(0)" onclick="showDelModal('+ row.id +');" >删除</a>';
					str += '&nbsp;';
					return str;
				}
	        }]
		});
		
		$('.addDict').click(function () {
			showModal("添加字典");
	    });
		
		//提示信息样式
		toastr.options = {
			closeButton: true,
			progressBar: true,
			positionClass: "toast-top-right", //toast-top-center, toast-top-right
			onclick: null,
			timeOut: 2000
		};
		
	});
	
	function editDict(id){
		$.ajax({
			type: "GET",
			async: false,
			data: {"id": id, "r": Math.random()},
			dataType: "json",
			url: "${ctx}/pdict/get",
			success: function(data){
				showModal("编辑字典", data);
			},
			error: function(){
				toastr.error("查询字典失败！");
			}
		});
	}
	
	
	function showDelModal(id){
		$delModal = $('#delModal').modal({
			"backdrop": 'static',
			"show": true
		});
		
		$('#delOk').off();
		$('#delOk').on('click', function(){
			deleteDict(id);
		});
		
		$delModal.modal('show');
	}
	
	function deleteDict(id){
		$.ajax({
			type: "POST",
			async: false,
			data: {"id": id},
			dataType: "json",
			url: "${ctx}/pdict/delete",
			success: function(data){
				if(data.success){
					$delModal.modal("hide");
					$table.bootstrapTable("refresh");
					toastr.success(data.msg);
				}else{
					$delModal.modal("hide");
					toastr.error(data.msg);
				}
			},
			error: function(){
				$delModal.modal("hide");
				toastr.error("删除字典失败！");
			}
		});
	}
	
	function showModal(title, row) {
		$('#dictModal').off();
		
		var $modal = $('#dictModal').modal({
			"backdrop": 'static', //禁止模态失去焦点关闭
			"show": true
		});
		$modal.find('.modal-title').text(title);
		
		//重置表单
		$("#dictForm")[0].reset();
		$("#id").val("");
		
		$('#dictModal').on("shown.bs.modal", function(){
			$("#type").focus();
		});
		$('#dictModal').on("hidden.bs.modal", function(){
			//重置表单
			$("#dictForm")[0].reset();
			$("#id").val("");
		});
		
		//取上级字典并填充下拉
		$.ajax({
			type: "GET",
			async: false,
			data: {},
			dataType: "json",
			url: "${ctx}/pdict/list",
			success: function(data){
				var options = "";
				options = options + "<option value='0'>请选择</option>";
				$.each(data, function(i,item){
					options = options + "<option value='"+item.id+"'>"+item.label+"</option>";
				});
				$("#parentId").html(options);
			},
			error: function(data){
				toastr.error("查询字典失败！");
				$modal.modal("hide");
			}
		});

		//表单赋值
		if(row){
			for (var name in row) {
				switch(name){
					case "parentId" :
						//$modal.find('input[name=' + name + ']').val(row[name]);
						$("#parentId").val(row[name]);
						break;
					default:
						$modal.find('input[name=' + name + ']').val(row[name]);
				}
			}
		}
		
		//表单校验及提交
		var e = "<i class='fa fa-times-circle'></i> ";
		$("#dictForm").validate({
			rules : {
				type : {
					required : !0,
					minlength : 1,
					maxlength : 20
				},
				value : {
					required : !0,
					minlength : 1,
					maxlength : 20
				},
				label : {
					required : !0,
					minlength : 1,
					maxlength : 20
				},
				sort : {
					required : !0,
					digits: !0,
					minlength : 1,
					maxlength : 5,
				}
			},
			messages : {
				type : {
					required : e + "请输入字典类型",
					minlength : e + "字典类型必须1字符以上",
					maxlength : e + "字典类型最多20个字符"
				},
				value : {
					required : e + "请输入字典值",
					minlength : e + "字典值必须1个字符以上",
					maxlength : e + "字典值最多20个字符"
				},
				label : {
					required : e + "请输入字典显示",
					minlength : e + "字典显示必须1个字符以上",
					maxlength : e + "字典显示最多20个字符"
				},
				sort : {
					required : e + "请输入排序值",
					minlength : e + "排序值必须1个或1个字符以上",
					maxlength : e + "排序值最多5个字符以上"
				}
			},
			submitHandler: function(form){
				$(form).ajaxSubmit({
					type: "POST",
					dataType: "json",
					url: "${ctx}/pdict/save",
					success: function(data){
						if(data.success){
							$modal.modal("hide");
							$table.bootstrapTable("refresh");
							toastr.success(data.msg);
						}else{
							toastr.error(data.msg);
						}
					},
					error: function(data){
						toastr.error("保存字典失败！");
					}
				});
			}
		});
	}
	
</script>

</body>
</html>